<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>网站后台管理模版</title>
    <script src="../../static/admin/js/vue.js"></script>
    <script src="../../static/admin/js/axios-0.18.0.js"></script>
    <link rel="stylesheet" type="text/css" href="../../static/admin/layui/css/layui.css"/>
    <script src="../../static/admin/element-ui/lib/index.js"></script>
    <link rel="stylesheet" type="text/css" href="../../static/admin/css/admin.css"/>
    <link rel="stylesheet" href="../../static/admin/element-ui/lib/theme-chalk/index.css">
    <script src="../../static/admin/element-ui/lib/index.js"></script>
    <script src="../../static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../static/admin/js/common.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
<div class="page-content-wrap" id="app">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-inline tool-btn">
                <el-button type="success" @click="addgsForm()" icon="el-icon-plus"></el-button>
                <el-dialog :title="title" width="30%" :visible.sync="dialogAddgsVisible"
                           @close="closeDialogAddgsVisible"
                           :modal-append-to-body="false">
                    <el-form :model="option" ref="option" label-width="150px" label-height="200px">
                        <el-form-item>
                            <div class="demo-input-suffix" align="left">
                                问卷名称:
                                <el-input v-model="questionnaire.name"
                                          style="width: 75%"
                                          placeholder="请输入问卷名称"></el-input>
                                <br>
                                问卷封面:
                                <div class="layui-input-block">
                                    <input type="file" name="link2" required lay-verify="required" @change="uploadFile()">
                                </div>

                                问卷等级:
                                <el-input v-model="questionnaire.level"
                                          style="width: 75%"
                                          placeholder="请输入问卷等级"></el-input>
                                <br>
                                问卷星级:
                                <el-input v-model="questionnaire.star"
                                          style="width: 75%"
                                          placeholder="请输入问卷星级"></el-input>
                            </div>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                            			<el-button @click="dialogAddgsVisible = false">取 消</el-button>
                            			<el-button type="primary" @click="saveQuestionnaire()">确 定</el-button>
                        			</span>
                </el-dialog>
            </div>
            <div class="layui-inline">
                <input type="text" name="title" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
            <button class="layui-btn layui-btn-normal" lay-submit="search">搜索</button>
        </div>
    </form>
    <div class="layui-form" id="table-list">
        <template>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        type="index"
                        label="问卷编号"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="问卷名称"
                        width="150">
                </el-table-column>
                <el-table-column
                        label="封面"
                        width="200">
                    <template slot-scope="scope">
                        <img :src="scope.row.cover" height="100"/>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="level"
                        label="问卷级别"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="star"
                        label="星级"
                        width="100">
                </el-table-column>
                <el-table-column label="跳转">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.row)">跳转
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="删除">
                    <template slot-scope="scope">
                        <el-button
                                class="el-icon-delete"
                                @click="deleteById(scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
</div>
<script>
    layui.use(['form', 'jquery', 'layer', 'dialog'], function () {
        let $ = layui.jquery;

        //修改状态
        $('#table-list').on('click', '.table-list-status', function () {
            let That = $(this);
            let status = That.attr('data-status');
            let id = That.parent().attr('data-id');
            if (status == 1) {
                That.removeClass('layui-btn-normal').addClass('layui-btn-warm').html('隐藏').attr('data-status', 2);
            } else if (status == 2) {
                That.removeClass('layui-btn-warm').addClass('layui-btn-normal').html('显示').attr('data-status', 1);

            }
        })

    });

    const app = new Vue({
        el: "#app",
        data: {
            tableData: [{
                id: "",
                name: "",
                cover: "",
                level: "",
                star: 0,
            }],
            questionnaire: {
                id: "",
                name: "",
                cover: "",
                level: "",
                star: 0,
            },
            title: "",
            dialogAddgsVisible: false,
            // 对话框显示与否
            dialogVisible: false,
            dataloading: false,
            posterUrl: '',
            imgUrls: [],
            imgWidth: '320',
            imgHeight: '400',
        },
        methods: {
            //审核图片大小
            beforeUpload(file) {
                let _this = this;
                let _checkSize = false;  //是否需要指定上传图片的尺寸
                if (file.size > 1024 * 1024 * 10) {  //大小超过10MB
                    _this.$message.error('图片太大，请重新选择');
                    return false;
                }
                const isSize = new Promise((resolve, reject) => {
                    let _URL = window.URL || window.webkitURL;
                    let img = new Image();
                    img.onload = function () {
                        if (!_checkSize || (_checkSize && img.width == _this.imgWidth && img.height == _this.imgHeight)) {
                            resolve();
                        } else {
                            reject();
                        }
                    }
                    img.src = _URL.createObjectURL(file);
                }).then(() => {
                    return file;
                }, () => {
                    _this.$message.error('图片尺寸不对，请重新选择');
                    return Promise.reject();
                });
                return isSize;
            },

            //文件上传
            uploadFile() {
                let formData = new window.FormData();
                formData.append('uploadFile', document.querySelector('input[type=file]').files[0]);
                let options = {  // 设置axios的参数
                    url: "/uploadReportInfo",//访问地址
                    data: formData,
                    method: 'post',
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                };
                axios(options).then(resp => {
                    if (resp.data != "") {
                        this.testSoul.cover = resp.data;
                    }
                })
            },

            <!--新增题目模态框-->
            addgsForm() {
                this.dialogAddgsVisible = true;
                this.title = "请输入问卷"
            },

            <!--关闭或取消模态框，清空值-->
            closeDialogAddgsVisible() {
                this.$refs.addForm.resetFields();//element封装的方法,清空模态框的值
                this.title = "" //初始化title的值
                this.question.question = "";//初始化addForm中的值
            },

            <!--新增问题模态框-->
            addgsForm() {
                this.dialogAddgsVisible = true;
                this.title = "请输入问卷信息"
            },

            <!--关闭或取消模态框，清空值-->
            closeDialogAddgsVisible() {
                this.$refs.addForm.resetFields();//element封装的方法,清空模态框的值
                this.title = "" //初始化title的值
                this.option.option = "";//初始化addForm中的值
                this.option.score = "";
            },

            handlePreview(file) {

            },

            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },

            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${file.name}？`);
            },

            //查询所有试卷
            findTestSoulList() {
                axios.get("/testSoul/findTestSoul",).then(resp => {
                    this.tableData = resp.data;
                })
            },

            findQuestion(id) {
                location.href = "/backstage/admin/index/question.html?id=" + id;
            },

            saveQuestionnaire() {
                axios.post("/testSoul/saveQuestionnaire", this.questionnaire)
                    .then(resp => {
                        this.dialogAddgsVisible = false;
                        this.findQuestionList(this.questionnaireId);
                    })
            },

            handleEdit(row) {
                location.href = "question.html?id=" + row.id;
            },

            deleteById(row) {
                axios.get("/testSoul/deleteByQuestionnaireId/" + row.id).then(resp => {
                    this.dialogAddgsVisible = false;
                })
            },
        },
        created() {
            //查询所有试卷
            this.findTestSoulList();
        }
    });
</script>
</body>

</html>